<template>
<div id="app">
  <div style=" width: 70%;padding-top: 20px; border-radius: 10px; margin-top: 10px;">
    <el-card style="width: 100%;margin: 0 auto">
      <el-page-header style="margin-top: 10px; margin-bottom: 10px;" @back="goBack" content="提问信息"></el-page-header>
<!--      <span style="color: #0d6efd">一病多问</span><br/><br/>-->
      <p>{{ question.problem }}</p><br/>
      <img :src="question.picture" v-if="question.picture" width="300" height="200" class="head_pic"/><br/>
      <span style="color: gray;font-size: 12px">提问人：{{question.user.nickname}}</span>
      <span style="font-size: 10px; color: darkgray;float: right; margin-right: 40px">{{question.time}}</span>
    </el-card>

  <el-card style="width: 100%;margin: 0 auto">
    <div :title="item.problem" v-for="item in question.replyList" :key="item.id" class="d2">
      <br/>
      <el-avatar shape="circle" :size="30" :src="item.physician.photo"></el-avatar>
        <span style="margin-left: 5px;">{{item.physician.nickname}}</span>
        <span style="font-size: 15px">{{item.physician.identity}}</span>
        <span style="color: gray;font-size: 15px">{{item.physician.hospital.name}}</span>
      <el-button @click="handleQue(item.physician.id)" type="primary" round plain style="float: right">问TA</el-button><br/>
      <p>{{item.answer}}</p>
      <span style="font-size: 10px; color: darkgray"></span>
      <span style="font-size: 10px; color: darkgray;float: right">{{ item.createtime }}</span>
      <br/>
    </div>
    <div v-if="question.replyList.length === 0">
      <span>暂无回复</span>
    </div>
  </el-card>
  </div>
</div>
</template>

<script>
export default {
  name: "QuestionDetail",
  data() {
    return {
      question: {},
      phy: {},
    }
  },
  created() {
    console.log(this.$route.query.question)
    this.question = this.$route.query.question
  },
  methods: {
    handleQue(id){
      this.request.get("/physician/findById?id=" + id).then(res => {
        let phy;
        phy = res
        this.$router.push({path: '/front/phyInfo', query: {physician: phy}})
      })
    },
    goBack(){
      this.$router.back()
    }
  }
}
</script>

<style scoped>
#app{
  padding-top: 20px;
  display:flex;
  flex-direction: column;  /* 按照列column(垂直方向)排列*/
  justify-content: center;
  align-items: center;
}
.d2{
  padding-bottom: 20px;
  border-bottom: 1px solid gainsboro;
  width: 90%;
  margin: 0 auto
}
</style>
